<template>
  <div class="box">
    <div ref="chinaMap" style="height: 100vh;width: 100%;"></div>
    <div class="box1" ref="chart1" style="height: 250px;width:300px;"></div>
    <div class="box2" ref="chart2" style="height: 300px;width:300px;"></div>
    <div class="box3" ref="chart3" style="height: 150px;width:300px;"></div>
    <div class="box4" ref="chart4" style="height: 180px;width:300px;"></div>
    <div class="box5" ref="chart5" style="height: 250px;width:300px;"></div>
    <div class="box6" style="height: 120px;width:600px;">
      <div class="one">
        <span>泊位总数</span>
              <span>10000</span>
      </div>
      <div class="two">
        <span>已占泊位数</span>
              <span>10000</span>
      </div>
      <div class="three"> <span>剩余泊位数</span>
              <span>10000</span></div>
      <div class="four">
      <span>累计停车次数（辆）</span>
              <span>10000</span>
              </div>
    </div>

 </div>


</template>
  
<script setup lang="ts">
import * as echarts from 'echarts';
import chinaJSON from '@/assets/css/china.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
const chart1 = ref()
const chart2 = ref()
const chart3 = ref()
const chart4 = ref()
const chart5 = ref()
onMounted(() => {
  let myChart1 = echarts.init(chart1.value);
  let myChart2 = echarts.init(chart2.value);
  let myChart3 = echarts.init(chart3.value);
  let myChart4 = echarts.init(chart4.value);
  let myChart5 = echarts.init(chart5.value);
 drawChina()
 // 南丁格尔图
 const option1 = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: '停车场位置数量分布',
      type: 'pie',
      radius: [5, 80],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: '包河区' },
        { value: 38, name: '瑶海区' },
        { value: 32, name: '蜀山区' },
        { value: 30, name: '庐阳区' },
        { value: 28, name: '肥东县' },
        { value: 26, name: '肥西县' },
        { value: 22, name: '庐江县' },
        { value: 18, name: '长丰县' }
      ],
     
    }
  ]
};
const option2 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['包河区', '蜀山区', '庐江县', '庐阳区', '肥东县', '瑶海区', '肥西县']
  },
  series: [
    {
      name: '包河区',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: '蜀山区',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '庐江县',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '庐阳区',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: '肥东县',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
};
const option3 = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      center: ['50%', '75%'],
      radius: '90%',
      min: 0,
      max: 1,
      splitNumber: 8,
      axisLine: {
        lineStyle: {
          width: 6,
          color: [
            [0.25, '#FF6E76'],
            [0.5, '#FDDD60'],
            [0.75, '#58D9F9'],
            [1, '#7CFFB2']
          ]
        }
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '12%',
        width: 20,
        offsetCenter: [0, '-60%'],
        itemStyle: {
          color: 'white'
        }
      },
      axisTick: {
        length: 12,
        lineStyle: {
          color: 'inherit',
          width: 2
        }
      },
      splitLine: {
        length: 20,
        lineStyle: {
          color: 'inherit',
          width: 5
        }
      },
      axisLabel: {
        color: '#fff',
        fontSize: 12,
        distance: -60,
        rotate: 'tangential',
        formatter: function (value) {
          if (value === 0.875) {
            return 'Grade A';
          } else if (value === 0.625) {
            return 'Grade B';
          } else if (value === 0.375) {
            return 'Grade C';
          } else if (value === 0.125) {
            return 'Grade D';
          }
          return '';
        }
      },
      title: {
        offsetCenter: [0, '-10%'],
        fontSize: 12
      },
      detail: {
        fontSize: 12,
        offsetCenter: [0, '-35%'],
        valueAnimation: true,
        formatter: function (value) {
          return Math.round(value * 100) + '';
        },
        color: 'inherit'
      },
      data: [
        {
          value: 0.7,
          name: 'Grade Rating'
        }
      ]
    }
  ]
};
const option4 = {
  title: {
    text: ''
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ],
    radius: 40,//缩放
    center: ['50%', '50%'],//位置

  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ],
    }
  ]
};
const option5 = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Line 1',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: 'Line 2',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: 'Line 3',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    },
    {
      name: 'Line 4',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    },
    {
      name: 'Line 5',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)'
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 302, 181, 234, 210, 290, 150]
    }
  ]
};
option1 && myChart1.setOption(option1);
option2 && myChart2.setOption(option2);
option3 && myChart3.setOption(option3);
option4 && myChart4.setOption(option4);
option5 && myChart5.setOption(option5);
window.addEventListener("resize",()=>{
  myChart1.resize()
  myChart2.resize()
  myChart3.resize()
  myChart4.resize()
  myChart5.resize()

})
})
let regions = [
 {
  name: '新疆维吾尔自治区',
  itemStyle: {
   areaColor: '#374ba4',
   opacity: 1,
  },
 },
 {
  name: '四川省',
  itemStyle: {
   areaColor: '#fe9b45',
   opacity: 1,
  },
 },
 {
  name: '陕西省',
  itemStyle: {
   areaColor: '#fd691b',
   opacity: 1,
  },
 },
 {
  name: '黑龙江省',
  itemStyle: {
   areaColor: '#ffc556',
   opacity: 1,
  },
 },
]
let scatter: any[]= [
//  { name: '北京烤鸭', value: [116.46122, 39.97886, 9] },
//  { name: '兰州拉面', value: [103.86615, 36.040129, 9] },
//  { name: '新疆烤肉', value: [87.613228, 43.810394, 9] },
//  { name: '长沙臭豆腐', value: [112.915204, 28.207735, 9] },
//  { name: '西安肉夹馍', value: [108.953445, 34.288842, 9] },
//  { name: '云南', value: [102.710002, 25.045806, 9] },
]
function drawChina() {
 var myChart = echarts.init(chinaMap.value)
 echarts.registerMap('china', chinaJSON) //注册可用的地图
 var option = {
  geo: {
   map: 'china',
   roam: true, //是否允许缩放，拖拽
   zoom: 0.8, //初始化大小
   //缩放大小限制
   scaleLimit: {
    min: 0.8, //最小
     max: 2, //最大
    },
    //设置中心点
    center: [108, 22],
    //省份地图添加背景
    regions: regions,
    itemStyle: {
     areaColor: '#0b122e',
     color: 'red',
     borderColor: '#232652',
     borderWidth: 2,
   },
   //高亮状态
   emphasis: {
     itemStyle: {
     areaColor: '#1af9e5',
      color: '#fff',
     },
    },
  },
  //配置属性
  series: {
   type: 'effectScatter',
   coordinateSystem: 'geo',
   data: scatter, 
   showEffectOn: 'render',
    rippleEffect: {
     //涟漪特效相关配置
     brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'
   	},
    hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
    label: {
     //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
     normal: {
      formatter: '{b}',
      position: 'right',
      show: true,
     },
    },
    itemStyle: {
    //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时
     normal: {
      color: '#ffffff', //散点的颜色
      shadowBlur: 10,
      shadowColor: 20,
      fontSize: '12px',
     },
    },
    zlevel: 1,
   },
 }
 myChart.setOption(option)
}
</script>
  
<style scoped lang="scss">
  .box{
    
margin:0px;
background: url('@/assets/imgs/bg-3.webp') no-repeat;
background-size:100% 100%;
background-attachment:fixed;
  }
  .box1{
    position: absolute;
    top: 45px;
    left: 80px;
  }
  .box2{
    position: absolute;
    top: 350px;
    left: 80px;
  }
  .box3{
    position: absolute;
    top: 70px;
    right: 80px;
  }
  .box4{
    position: absolute;
    top: 230px;
    right: 80px;
  }
  .box5{
    position: absolute;
    top: 500px;
    right: 80px;
  }
  .box6{
    border: 1px solid white;
    position: absolute;
    bottom: 34px;
    left: 520px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .one{
    display: flex;
    flex-direction:column;
    justify-content: space-around;
    align-items: center;
    color: #fff;
  }
  .two{
    display: flex;
    flex-direction:column;
    justify-content: space-around;
    align-items: center;
    color: #fff;
  }
  .three{
    display: flex;
    flex-direction:column;
    justify-content: space-around;
    align-items: center;
    color: #fff;
  }
  .four{
    display: flex;
    flex-direction:column;
    justify-content: space-around;
    align-items: center;
    color: #fff;
  }
</style>
  